import { genForm, genFormValidate } from "../validate";
import { defineFormRules } from "../form";
import { phone } from "../form-field";

import "../select.component";
import "../checkboxgroup.component";
import "../radiogroup.component";

export var template = `
<div class="aui-form-group" aui-required="">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">手机</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <input class="aui-form-control" type="text"
    v-model="form.data.v4.value"            
    v-input-validate="form.element.v4">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>

<div class="aui-form-group" aui-required="">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">单选select</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <aui-select theme="default" ref="select2"
    v-model="form.data.v5.value"           
    ></aui-select>
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>

<div class="aui-form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">
    单选
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <aui-radio-group :radios="radios" v-model="form.data.v6.value"></aui-radio-group>
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>

<div class="aui-form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">
    多选
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <aui-checkbox-group name="v7" :checkboxs="checks" v-model="form.data.v7.value"></aui-checkbox-group name="v7">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>

<div class="aui-form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right aui-form-label">
    日期范围选择
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <aui-input-daterange></aui-input-daterange>
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>

<div class="aui-form-group">
<div class="aui-layout aui-layout-grid align-item-center">
<div class="aui-layout__item aui-col-xs-12 aui-col-md-2 aui-col-lg-2 aui-md-text-align-right">
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">
    <button class="btn btn-info" type="button" :disabled="checkGroupError()">提交</button>
</div>
<div class="aui-layout__item aui-col-xs-12 aui-col-md-5 aui-col-lg-5">   
</div>
</div>
</div>
`;

export var formField = {
    "v4": phone(),
    "v5": {
        attr: {
            value: 0
        }
    },
    "v6":  {
        attr: {
            value: 0
        }
    },
    "v7":  {
        attr: {
            value: 0
        }
    }
};

export class UIExampleOtherForm extends window.AUI.app.BaseComponent {
    constructor(name) {
        super(name);
        this.methods = {
            checkGroupError() {
                var self = this;
                return self.form.checkErrorByfieldkeys(["v5", "v6", "v7"]);
            }
        }
    }
    _template() {
        var self = this;
        return `<div class="${self._name}">
<form ref="form" class="form-validation" action="">   

${template}

{{form.getData()}}

</form>
</div>`;
    }
    _mounted() {
        var self = this;

        var options = [
            {
                label: "Action",
                value: 0
            },
            {
                label: "Another action",
                value: 1
            },
            {
                label: "Something else here",
                value: 2
            },
            {
                label: "Action",
                value: 3
            },
            {
                label: "Another action",
                value: 4
            },
            {
                label: "Something else here",
                value: 5
            }
        ];

        self.$refs.select2.setOptions(options);

        // 类似于select selectedIndex
        self.$refs.select2.setSelectedIndex(0);


        genFormValidate(self, "form");
        self.form.validateAll();
    }
    _data() {
        var ret = {};
        ret.radios = [
            {
                label: "label1",
                value: "0"
            },
            {
                label: "label2",
                value: "1"
            }
        ];
        ret.checks = [
            {
                label: "checkbox1",
                value: 0                
            },
            {
                label: "checkbox2",
                value: 1
            }
        ];

        formField["v6"].attr.value = ret.radios[0].value;
        formField["v7"].attr.value = [ret.checks[0].value];

        ret.formFields = defineFormRules(formField);
        ret.form = genForm(ret.formFields, Object.keys(ret.formFields));
        return ret;
    }  
}
